<!--
 版权名称和logo
-->
<template>
  <div class="item">
    <div class="item" style="display: flex">
      <label class="item-label">LOGO：</label>
      <div
        style="margin: 0px 1px 3px 15px"
        :class="[isIntl ? 'intl-wrapper' : '']"
      >
        <div class="monitortip">
          <p>{{ $t('exportPdf.logoTip1') }}</p>
          <p>{{ $t('exportPdf.logoTip2') }}</p>
          <p style="color: #ff9b00">{{ $t('exportPdf.logotip3') }}</p>
        </div>

        <div class="txtHint">
          <div class="intl-logo-wrapper" v-if="isIntl">
            <a-row style="width: 100%" :gutter="16">
              <a-col :span="8">
                <div
                  class="intl-logo-item"
                  :class="type === 'GROUP' ? 'select-item' : ''"
                  @click="onClickLogoItem('GROUP')"
                >
                  <icon-font class="select-item__icon" type="ic-online" />
                  <p>Project</p>
                  <div class="imgPreview">
                    <img class="logoImg" :src="groupsLogoSrc" />
                  </div>
                </div>
                <div class="imgBtn">
                  <a-button
                    type="primary"
                    ghost
                    style="position: absolute; min-width: 120px"
                  >
                    <span v-if="groupsLogoSrc == ''">{{
                      $t('exportPdf.clickUpload')
                    }}</span>
                    <span v-else>{{ $t('exportPdf.reupload') }}</span>
                  </a-button>
                  <input
                    type="file"
                    id="fileProject"
                    @change="logoChange($event, 'GROUP')"
                    class="filepath"
                    accept="image/jpg,image/jpeg,image/png,image/PNG,image/bmp"
                  />
                </div>
              </a-col>
              <a-col :span="8">
                <div
                  class="intl-logo-item"
                  :class="type === 'TENANT' ? 'select-item' : ''"
                  @click="onClickLogoItem('TENANT')"
                >
                  <icon-font
                    class="select-item__icon"
                    type="ic-online"
                    style=""
                  />
                  <p>Tenant</p>
                  <div class="imgPreview">
                    <img class="logoImg" :src="tenantLogoSrc" />
                  </div>
                </div>
                <div class="imgBtn">
                  <a-button
                    type="primary"
                    ghost
                    style="position: absolute; min-width: 120px"
                  >
                    <span v-if="tenantLogoSrc == ''">{{
                      $t('exportPdf.clickUpload')
                    }}</span>
                    <span v-else>{{ $t('exportPdf.reupload') }}</span>
                  </a-button>
                  <input
                    type="file"
                    id="fileTenant"
                    @change="logoChange($event, 'TENANT')"
                    class="filepath"
                    accept="image/jpg,image/jpeg,image/png,image/PNG,image/bmp"
                  />
                </div>
              </a-col>
              <a-col :span="8">
                <div
                  class="intl-logo-item"
                  :class="type === 'DEFAULT' ? 'select-item' : ''"
                  @click="onClickLogoItem('DEFAULT')"
                >
                  <icon-font
                    class="select-item__icon"
                    type="ic-online"
                    style=""
                  />
                  <p>Default</p>
                  <img
                    class="default-img"
                    :src="defaultLogoSrc"
                    height="64px"
                    width="200px"
                  />
                </div>
              </a-col>
            </a-row>
          </div>

          <!-- 20230330 tommy 国内上传图片 -->
          <template v-else>
            <div
              class="imgPreview"
              :style="{
                width: logoWidth + 'px',
                height: logoHeight + 'px',
              }"
            >
              <img class="logoImg" :src="logosrc" />
            </div>
            <div class="imgBtn">
              <a-button type="primary" ghost style="position: absolute">
                <span v-if="logosrc == ''">{{
                  $t('exportPdf.clickUpload')
                }}</span>
                <span v-else>{{ $t('exportPdf.reupload') }}</span>
              </a-button>
              <input
                type="file"
                id="file"
                @change="logoChange"
                class="filepath"
                accept="image/jpg,image/jpeg,image/png,image/PNG,image/bmp"
              />
            </div>
          </template>
        </div>
      </div>
    </div>

    <div class="item">
      <label class="item-label">{{ $t('exportPdf.copyright') }}</label>
      <a-tooltip placement="topLeft">
        <template #title>
          <span>{{ $t('exportPdf.inputTip') }}</span>
        </template>
        <a-input
          v-model="copyright"
          :placeholder="$t('exportPdf.copyright1')"
          style="width: 350px; display: inline-block"
          @change="setCopyRight"
        ></a-input>
      </a-tooltip>
    </div>
  </div>
</template>
<script>
import { requestHttp, maccApi } from '@utils/index';
export default {
  name: 'copyrightLogo',
  props: {},
  components: {},
  data() {
    // let validateCopyright = function (rule, value, callback) {
    //   if (value === null || value === undefined || value === '') {
    //     return callback(new Error('版本所有'));
    //   }
    //   if (value.length > 12) {
    //     return callback(new Error('请输入中文,英文字母，最大长度12'));
    //   }
    //   callback();
    // };
    return {
      groupId: this.$store.state.Group.groupId,
      logosrc: '',
      logoWidth: 350,
      logoHeight: 110,
      copyright: this.$t('exportPdf.copyright2'), //版权所有
      tenantLogoSrc: '',
      groupsLogoSrc: '',
      defaultLogoSrc: '',
      type: '',
      isIntl: process.env.VUE_APP_MACC_ENV === 'INTL',
    };
  },
  created() {
    this.initView();
  },
  mounted() {},
  methods: {
    initView() {
      this.getPdfLogoCopy();

      // 海外需要有单独的获取函数
      if (this.isIntl) {
        this.getLogoConfig();
      }
    },
    // 获取 TENANT 和 DEFAULT 的相关参数
    getLogoConfig() {
      let api = maccApi.DELIVERY_LOGO;
      requestHttp({
        api: api.replace('{groupId}', this.groupId),
        method: 'GET',
      }).then((ret) => {
        if (ret.code === 0) {
          this.groupsLogoSrc = ret?.groupLogo?.logo;
          this.defaultLogoSrc = ret?.defaultLogo?.logo;
          this.tenantLogoSrc = ret?.tenantLogo?.logo;
          this.type = ret.type;
        }
      });
    },
    // 获取 GROUP 的相关参数。
    getPdfLogoCopy() {
      let api = maccApi.DELIVERY_PDF_INFO;
      requestHttp({
        api: api,
        method: 'GET',
      }).then((ret) => {
        console.log(ret);
        if (ret && ret.code == 0) {
          if (ret.data) {
            this.copyright = ret.data.copyright || '';
          }
          if (!this.isIntl) {
            if (ret.data.logo != '') {
              this.changeLogopic(ret.data.logo, true);
            }
          }
        }
      });
    },
    changeLogopic(logosrc, isLoad) {
      let self = this;
      if (logosrc) {
        this.logosrc = logosrc;
        if (this.type === 'GROUP') {
          this.groupsLogoSrc = logosrc;
        } else if (this.type === 'TENANT') {
          this.tenantLogoSrc = logosrc;
        }
        let image = new Image();

        image.onload = function () {
          let width = image.width;
          let height = image.height;
          let logoWidth = 500;
          let logoHeight = 250;
          let wth = width / height;
          logoHeight = 30;
          logoWidth = (height / 30) * width;

          if (wth > 4 / 3) {
            logoWidth = parseInt((30 * width) / height);
          } else {
            logoHeight = 90;
            logoWidth = parseInt((90 * width) / height);
          }
          console.log('logoWidth' + logoWidth);
          console.log('logoWidth' + logoWidth);

          self.logoWidth = logoWidth;
          self.logoHeight = logoHeight;
          if (!isLoad) {
            self.setPdfLogoCopy();
          }
        };
        image.src = logosrc;
      } else {
        self.logosrc = '';
        if (this.type === 'GROUP') {
          this.groupsLogoSrc = '';
        } else if (this.type === 'TENANT') {
          this.tenantLogoSrc = '';
        }
      }
    },
    logoChange(event, type) {
      let reads = new FileReader();

      let f = null;
      if (process.env.VUE_APP_MACC_ENV === 'INTL') {
        if (type === 'GROUP') {
          f = document.getElementById('fileProject').files[0];
        } else {
          f = document.getElementById('fileTenant').files[0];
        }
      } else {
        f = document.getElementById('file').files[0];
      }

      reads.readAsDataURL(f);
      let name = f.name.split('.');
      let namehz = name[name.length - 1].toLowerCase();
      if (
        !(
          namehz == 'jpg' ||
          namehz == 'jpeg' ||
          namehz == 'png' ||
          namehz == 'bmp'
        )
      ) {
        this.$message.warning(this.$t('exportPdf.logoTip2'));
        return;
      }
      if (f.size > 100 * 1024) {
        this.$message.warning(this.$t('exportPdf.uploadTip2'));
        return;
      }
      let self = this;
      reads.onload = async function () {
        if (process.env.VUE_APP_MACC_ENV === 'INTL') {
          if (type === 'GROUP') {
            self.groupsLogoSrc = this.result;
            self.setIntlPdfLogoCopy(type);
          } else if (type === 'TENANT') {
            self.tenantLogoSrc = this.result;
            await self.setPdfLogoCopy();
            self.setIntlPdfLogoCopy(type);
          }
        } else {
          self.changeLogopic(this.result);
        }
        console.log(this.result);
      };
    },

    /**
     * @description: 海外点击事件
     * @param {*} type
     * @return {*}
     */
    async onClickLogoItem(type) {
      this.setIntlPdfLogoCopy(type);
    },

    /**
     * @description: 国内用的提交
     * @return {*}
     */
    async setPdfLogoCopy() {
      let groupId = this.groupId;
      let api = '';
      let params = {};
      api = maccApi.DELIVERY_PDF_INFO;
      params = {
        copyright: this.copyright,
        groupId: groupId,
      };

      if (process.env.VUE_APP_MACC_ENV === 'INTL') {
        this.logosrc = this.tenantLogoSrc;
      }

      if (this.logosrc) {
        params.logo = this.logosrc;
        if (this.logoHight > 0) {
          params.logoHight = this.logoHight;
          params.logoWidth = this.logoWidth;
        }
      }

      await requestHttp({
        api: api,
        method: 'POST',
        params: params,
      });
    },

    /**
     * @description: 海外用的提交
     * @param {*} type
     * @return {*}
     */
    setIntlPdfLogoCopy(type) {
      this.type = type;
      let groupId = this.groupId;
      let api = '';
      let params = {};

      api = maccApi.DELIVERY_LOGO.replace('{groupId}', this.groupId);
      params = {
        type: type,
        groupId: groupId,
        copyright: '',
      };
      if (this.type === 'GROUP' && this.groupsLogoSrc) {
        params.copyright = this.copyright;
        params.logo = this.groupsLogoSrc;
        if (this.logoHeight > 0) {
          params.logoHight = this.logoHeight;
          params.logoWidth = this.logoWidth;
        }
      }

      requestHttp({
        api: api,
        method: 'POST',
        params: params,
      }).then(() => {
        // if (ret.code == 0) {
        // }
      });
    },
    setCopyRight() {
      let val = this.copyright;
      let copyRightRegex = /^[\w\u4E00-\u9FA5-@©#]+$/;
      if (!copyRightRegex.test(val)) {
        this.$message.info(this.$t('exportPdf.inputTip'));
        return;
      }

      if (val.length > 200) {
        this.$message.info(this.$t('exportPdf.inputTip'));
        return;
      }
      this.setPdfLogoCopy();
    },
  },
  computed: {},
};
</script>
<style lang="less" scoped>
.intl-wrapper {
  width: 100%;
  max-width: 900px;
}
.intl-logo-wrapper {
  width: 100%;
}
.default-img {
  width: 100%;
  height: 62px;
}
.item {
  margin-top: 16px;
}
.item-label {
  width: 100px;
  display: inline-block;
  text-align: right;
}
//logo

.imgBtn {
  cursor: pointer;
  width: 120px;
  height: 30px;
  text-align: center;
  display: inline-block;
  // position: relative;
  width: 90px;
}
.filepath {
  width: 120px;
  height: 40px;
  opacity: 0;
}
.monitortip {
  font-size: 12px;

  background: rgba(231, 242, 255, 1);
  border-radius: 3px;
  border: 1px solid rgba(231, 242, 255, 1);
  padding-left: 10px;
  line-height: 22px;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-right: 10px;
  width: 380px;
}
.monitortip span {
  line-height: 16px;
}
.txtHint {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-top: 12px;
}

.select-item__icon {
  font-size: 20px;
  position: absolute;
  right: 16px;
  top: 8px;
  color: #2b6afd;
  display: none;
}

.imgPreview {
  width: 350px;
  height: 110px;
  margin-right: 32px;
  border: 1px dashed #0099ff;
  text-align: center;
  display: inline-block;
  .logoImg {
    width: 100%;
  }
}

.intl-logo-item {
  border: #999 1px solid;
  border-radius: 5px;
  cursor: pointer;
  padding: 8px;
  margin-bottom: 8px;

  // .imgPreview {
  //   width: 350px;
  //   height: 110px;
  //   margin-right: 32px;
  //   border: 1px dashed #0099ff;
  //   text-align: center;
  //   display: inline-block;
  //   .logoImg {
  //     width: 225px;
  //     height: 62px;
  //     position: absolute;
  //     left: 7px;
  //     z-index: -1;
  //   }
  // }

  .imgPreview {
    width: 100%;
    height: 62px;
    margin-right: 0;
    border: 1px dashed #0099ff;
    text-align: center;
    display: inline-block;
    .logoImg {
      height: 100%;
      width: 100%;
      position: relative;
      left: 0;
    }
  }
}

.select-item {
  border: #0099ff 1px solid;
  .select-item__icon {
    display: block;
  }
}
</style>
